<template>
    <div class="chatIndex">
        <HeaderNav :title="fromUser.name" :showBack="true" />

        <div style="background-color: #e6fefe; width: 100vw; overflow: scroll;" class="chatList" :class="{ shortList:popShow,longList:!popShow }" ref="chatCtn" id='content' @scroll='handleScroll' >
            <div class="loadding_container">
                <div v-show="loading">{{loadingText}}</div>
            </div>
            <div v-for="(item,index) in chatList" :key='index'>
                <div class="chatItem" v-if="item.isDriving">
                    <div class="chatTime">{{item.time}}</div>
                    <v-touch @press="touchin(item, index)"> 
                       
                       
                        <div class="chatLine" >
                            <img :src="item.img" class="chatPortrait" />
                            <div class="chatMessage" 
                                v-html="item.message" 
                                ></div>
                            <div class="chatMark"></div>
                        </div>
                    </v-touch>                    
                </div>

                <div class="chatItem chatItem" v-if="!item.isDriving">
                    <div class="chatTime">{{item.time}}</div>
                    <v-touch @press="touchin(item, index)"> 
                    <div class="chatLine chatLineRight" >
                        <div class="chatMessage" 
                            v-html="item.message"
                            ></div>
                        <div class="chatMark chatMarkRight"></div>
                        <img :src="item.img" class="chatPortrait" />
                    </div>
                    </v-touch>              
                </div>
            </div>
        </div>

        <div class="chatBottom">
            <div class="notice">
                {{$t('m.msg.MSG38')}}
            </div>
            <div class="inputCtn">
                <div class="inputMroe" v-on:click="moreInput">＋</div>
                <input type="text" v-model="sendMsg" />
                <div class="sendButton" @click="sendText()">{{$t('m.msg.SEND_BTN')}}</div>
            </div>
            <div class="inputPop" v-if="popShow">
                <div class="popChoose">
                    <i class="fa fa-smile-o" @click="showEmojiList()"></i>
                    <i class="fa fa-photo" @click="getImgList"></i>
                    <van-uploader 
                        
                        :before-read="beforeRead" > 
                        <i class="fa fa-file-photo-o"></i>
                    </van-uploader>
                    <i class="fa fa-gift" @click="toSendGift()" style='font-size: 5vh;'></i>
                  
                    <!-- accept="video/*,image/*,audio/*"<img src="../../assets/logo.png" class="popIcon" />
                    <img src="../../assets/logo.png" class="popIcon" />
                    <img src="../../assets/logo.png" class="popIcon" />
                    <img src="../../assets/logo.png" class="popIcon" /> -->
                </div>
                <emotion @emotion="handleEmotion" :height="200" v-show="showEmoji"></emotion>
                <div v-show="showImg" class="img_container">
                    <img :src='item.httpPath' :key="index" v-for="(item,index) in imgList" class="img_item" @click="sendImg(item.httpPath)" />
                </div>
            </div>
        </div>

        <!-- 发送图片预览 -->
        <van-popup closeable v-model="sendDialogFlag" style="width: 90%;text-align:center">
            <div style='margin-bottom: 5%;'> {{$t('m.msg.MSG96')}}</div>
            <!-- <div style='width:90vw;display:flex;align-items: center;justify-content: center;'>
                <img :src='filePath' style="margin: 30px;max-height: 100vh;width:90vw;"/>
            </div> -->
            <div v-if="filePath && fileType == 'image'" style='padding: 1vh 0;width:90vw;display:flex;align-items: center;justify-content: center;'>
                <img :src="filePath" style="width: 100%;max-height: 86vh;"/>
            </div>
            <video v-else-if="filePath && fileType == 'video'" controls='true' width="80%"  height="60%" :src="filePath"></video>
            <div v-else > {{$t('m.msg.MSG95')}}!</div>
            <div class="translate_bottom">
                <div @click="sendDialogFlag = false"  class="popup_btn">{{$t('m.msg.CANCEL_BTN')}}</div>
                <div type="primary" class="popup_btn" @click="upload()">{{$t('m.msg.SEND_BTN')}}</div>
            </div>
        </van-popup>

        <!-- 放大图片 -->
        <van-popup closeable v-if="showDialog" v-model="showDialog" style='width: 80%;display:flex;align-items:center;justify-content: center;'>
            <div style='padding: 1vh 0;width:90vw;display:flex;overflow: auto;align-items: center;justify-content: center;'>
                <img :src="showFilePath" style="width: 100%;max-height: 98vh;"/>
            </div>
        </van-popup>

        <!-- 翻译弹框 -->
        <van-popup closeable v-model="dialogFlag" class="popup">
            <div class="translate_tab">
                <div :class="`${translateTab == 0 ? 'translate_tab_item_sel' : 'translate_tab_item'}`" @click="changeTab(0)" >{{$t('m.msg.MSG55')}}</div>
                <div :class="`${translateTab == 1 ? 'translate_tab_item_sel' : 'translate_tab_item'}`" @click="changeTab(1)" >{{$t('m.msg.MSG56')}}</div>
            </div>
            <div class="translate_container" v-if="translateTab == 0">
                <div class="translate_item translate_title">{{$t('m.msg.MSG47')}}：</div>
                <div class="translate_item" @click="selTranslate(item.code)"  v-for="(item,i) in translateList" :key="i" :style="`${translateCode == item.code ? 'background-color: #01d2ff;' : ''}`" >{{item.name}}</div>
            </div>
            <div class="translate_pay" v-if="translateTab == 1">
                <div class="translate_item translate_title">{{$t('m.msg.MSG48')}}：{{translatePrice.price}}{{$t('m.msg.MSG51')}}</div>
                <div class="translate_item translate_title">{{$t('m.msg.MSG49')}}：{{translatePrice.surplus}}{{$t('m.msg.MSG52')}}</div>
                <div style="margin: 20px 10%;width: 80%;">
                    <div style="display: flex;font-size: 14px;align-items:center;justify-content: space-between;">
                        {{$t('m.msg.MSG54')}}<input v-model="money" style="width: 60px;height: 20px;" :placeholder="$t('m.msg.MSG50')" />{{$t('m.msg.MSG53')}}{{translatePrice.price * money}}{{$t('m.msg.MSG52')}}
                    </div>
                    <div class='select_month'>
                        <div class='select_add' @click.stop='addMonth()'>+</div>
                        <div class='select_add' @click.stop='subtractMonth()'>-</div>
                    </div>
                </div>
            </div>
            <div class="translate_bottom">
                <div @click="dialogFlag = false"  class="popup_btn">{{$t('m.msg.CANCEL_BTN')}}</div>
                <div type="primary" class="popup_btn" @click="okBtn()">{{$t('m.msg.OK_BTN')}}</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import {Uploader, Popup} from 'vant';
    import HeaderNav from '@/components/HeaderNav.vue'
    import Emotion from '@/components/Emotion/index'
    import base from '@/config/base'
    import websoketConstant from '@/api/socketConstant'
    import {getUser} from '@/api/session';
    import {postQuery,postQuery2, getQuery, uploadvideo, uploadImg, formatDateTime, getEmotionHtml} from '@/api/query';
    export default {
        name: 'chatIndex',
        data() {
            return {
                ws: {},
                user: {},
                fromUser: {},
                showEmoji: false,
                sendMsg: '',
                websoketUrl: base.websoketUrl,
                httpUrl: base.baseUrl,
                popShow: false,
                chatList: [],
                chartIds:[],
                more: '',
                pageSize: 15,
                pages: 0,
                loading: false,
                loadingText: this.$i18n.t('m.msg.MSG39'),
                finished: false,
                scrollStatus: false,//限制滚动触发
                pageNo: 1, //页数
                userLogoffFlag: true,//在线下线状态
                translateList: [],//可转换的语言
                translateCode: '',//要转换的语言
                translateTab: 0,//切换
                // timeOutEvent: 0,
                translateMsg: {},
                translateIndex: 0,
                loop:"",
                money: 1,
                translatePrice: {},
                file: {},//预览文件上传
                filePath: '',
                fileType: '', //1图片  2vedio
                showDialog: false,//图片放大
                showFilePath: '',//图片放大
                sendDialogFlag: false,//发送图片预览
                dialogFlag: false,//选择翻译框
                showImg: false,//显示图片表情
                imgList:[]
            }
        },
        methods: {
            //发送表情
            sendImg(httpUrl){
                let that = this;
                let param = {          
                    memberId: that.fromUser.id,
                    type: 'image',
                    data: httpUrl
                }
                that.send(param);
            },
            //获取表情列表
            getImgList(){
                let that = this;
                that.showEmoji = false
                that.showImg = !that.showImg
                if(that.showImg){
                    postQuery('/member/expression/have/list')
                        .then (res => {
                        if(res.code == 200){
                            console.log('表情。。。。',res.data)
                            that.imgList = res.data
                        }else{
                            that.$toast.fail(res.msg);
                        }
                    })
                }
            },
            showEmojiList(){
                let that = this;
                that.showEmoji = !that.showEmoji
                that.showImg = false
            },
            showDetail(url){
                this.showFilePath = url;
                this.showDialog = true;
            },
            changeTab(val){
                this.translateTab = val
            },
            addMonth(){
                let that = this;
                that.money ++;
            },
            subtractMonth(index){
                let that = this;
                if(that.money > 1){
                    that.money --;
                }
            },
            touchin(item, index){ 
                var that=this;
                this.Loop = setTimeout(function() {
                    that.Loop = 0;
                    that.touchMsg(item, index)
                    //执行长按要执行的内容，如弹出菜单
                    // console.log('消息被长按了！')
                    // alert('消息被长按了')
                }, 2000);
            },
            touchMsg(item, index){
                this.translateMsg = item;
                this.translateIndex = index;
                this.dialogFlag = true;
                //查询有的次数
                this.getTranslatePrice();
            },
            selTranslate(code){
                let that = this;
                that.translateCode = code;
            },
            //翻译结果
            getTranslateTxt(){
                let that = this;
                let params = {
                   code: that.translateCode,
                   text: that.translateMsg.message
                }
                postQuery2('/member/translate/translate', params)
                    .then (res => {
                    if(res.code == 200){
                        if(res.data.type == 'success'){
                            that.translateMsg.message = res.data.str
                            that.chatList[that.translateIndex] = that.translateMsg
                        }else if(res.data.type == 'fail') {
                            that.$toast.fail(res.data.msg);
                        }else if(res.data.type == 'recharge') {
                            that.$toast.fail(that.$i18n.t('m.msg.MSG57'));
                        }
                    }else{
                        that.$toast.fail(res.msg);
                    }
                })
            },
            //确定按钮
            okBtn(){
                let that = this;
                if(that.translateTab == 1){
                    that.payTranslate();
                }else{
                    that.getTranslateTxt();
                    that.dialogFlag = false;
                }
            },
            //购买翻译服务
            payTranslate(){
                let that = this;
                postQuery('/member/translate/purchase/' + that.money)
                    .then (res => {
                    if(res.code == 200){
                        that.$toast.success(that.$i18n.t('m.msg.PAY_SUCCESS'));
                    }else{
                        that.$toast.fail(res.msg);
                    }
                })
            },
            getTranslatePrice(){
                let that = this;
                getQuery('/member/translate/price')
                    .then (res => {
                    if(res.code == 200){
                        that.translatePrice = res.data;
                        
                    }else{
                        that.$toast.fail(res.msg);
                    }
                })
            },
            //上拉加载
            handleScroll(e){
                // //console.log('滚动',e.target.scrollTop)
                //e.target.scrollTop  距离顶部的高度
                let that = this; 
                if (that.scrollStatus) {
                    return;
                }
                //console.log('请求。。。。。。。。')
                let scrollTop = e.target.scrollTop;
                if(scrollTop <= 10 && !that.finished){
                    that.loading = true;
                    that.loadingText = that.$i18n.t('m.msg.MSG39')
                    that.scrollStatus = true;
                    setTimeout(() => {
                        that.scrollStatus = false;
                    }, 3000);
                    that.loadData();
                   
                }
                // else{
                //     console.log(scrollTop <= 10)
                //     that.loading = true;
                //     that.loadingText = '没有更多了'
                //     that.scrollStatus = true;
                //     console.log(333)
                // }
            },
            //获取语言列表
            getTranslateList(){
                let that = this;
                getQuery('/member/translate/list')
                    .then (res => {
                    if(res.code == 200){
                        console.log(res);
                        that.translateList = res.data
                       
                    }else{
                        that.$toast.fail(res.msg);
                    }
                })
            },
            //加载历史消息
            loadData(){
                let that = this;
                if(that.pages > 0 && that.page > that.pages){
                    
                    that.loading = true;
                    that.loadingText = that.$i18n.t('m.msg.MSG6')
                    that.finished = true;
                }
                let params = {
                    pageNumber: that.pageNo,
                    pageSize: that.pageSize
                }
                getQuery('/member/record/message/list/'+that.fromUser.id, params)
                    .then (res => {
                    if(res.code == 200){
                        // console.log(res);
                        let chatList = [];
                        console.log(res)

                        let list = res.data.records;
                        that.pages = res.data.pages;
                        for(let i = 0; i < list.length; i ++){
                            let item = {};
                            if(list[i].formId == that.user.id){
                                item.isDriving = false
                                item.img = that.user.httpAvatar
                            }else{
                                item.isDriving = true
                                item.img = that.fromUser.httpAvatar
                            }
                            //判断消息类型
                            if(list[i].type == 'text'){
                                item.message = getEmotionHtml(list[i].content);
                            }else if(list[i].type == 'image'){
                                item.message = `<img src='${list[i].httpPath}' onclick='showDetail("${list[i].httpPath}")' style='width: 100px;'>`
                            }else if(list[i].type == 'video'){
                                item.message = `<video controls="true" width="100%" height="100%" src="${list[i].httpPath}"></video>`
                            }
                            item.time = list[i].sendDate
                            chatList.push(item)
                        }
                        that.chatList = chatList.concat(that.chatList)
                        console.log(that.chatList)
                        if(that.pageNo == 1){
                            // console.log(that.$refs.chatCtn.scrollHeight)
                            that.$nextTick(function(){
                               that.$refs.chatCtn.scrollTop = that.$refs.chatCtn.scrollHeight
                            })
                        }
                        that.loading = false;
                        that.pageNo ++;
                        //数据不够一页
                        if(res.data.records.length < that.pageSize){
                            that.loading = true;
                            that.loadingText = that.$i18n.t('m.msg.MSG6')
                            that.finished = true;
                        }
                    }else{
                        that.$toast.fail(res.msg);
                        that.loading = true;
                        that.loadingText = that.$i18n.t('m.msg.MSG7')
                        that.finished = true;
                    }
                }).catch(function (error) {
                    that.loading = true;
                    that.loadingText = that.$i18n.t('m.msg.MSG7')
                    that.finished = true;
                });
            },
            //发送文本消息
            sendText(){
                let that = this;
                if(!that.sendMsg){
                   // that.$toast.fail('发送数据不能为空');
                    return;
                }
                //发送消息
                let param = {
                    
                    memberId: that.fromUser.id,
                    type: 'text',
                    data: that.sendMsg
                }
                that.send(param);
            },
            // 上传图片 视频
            beforeRead(file) {
                let that = this;
                that.fileType = '';
                if(file.type.indexOf('video') != -1 
				|| file.type.indexOf('audio') != -1){
					that.fileType = 'video';
				}else if(file.type.indexOf('image') != -1){
                    if(file.size >= 3145728){
                        that.$toast.fail(that.$i18n.t('m.msg.MSG2'));
                        return false;
                    }else{
                        that.fileType = 'image';
                    }
			    }else{
                    that.$toast.fail(that.$i18n.t('m.msg.MSG40'));
                    return false;
                }
                var reader = new FileReader();　　　　//实例化
                reader.readAsDataURL(file);　　　　　　//加载
                reader.onload = function () {
                    that.filePath = this.result;
                    that.sendDialogFlag = true;   
                    that.file = file;    
                }
                
                return true;
            },
            upload(){
                let that = this;
                if(!that.file && !that.filePath){
                    that.$toast.fail(that.$i18n.t('m.msg.MSG3'));
                    return
                }
                if(that.fileType == 'image'){
                     //上传图片
                    uploadImg(that.file)
                    .then (res => {
                        that.sendDialogFlag = false;   
                        //console.log(res)
                        if(res.code == 200){
                            //发送消息
                            let param = {
                                
                                memberId: that.fromUser.id,
                                type: that.fileType,
                                data: res.data.httpUrl
                            }
                            that.send(param);
                        }else{
                            that.$toast.fail(res.msg);
                            return;
                        }
                    }).catch(function (error) {
                        return;
                    });
                }else{
                    //上传视频
					uploadvideo(that.file)
					.then (res => {
                        that.sendDialogFlag = false;   
						// console.log(res)
						if(res.code == 200){
							 //发送消息
                            let param = {
                                
                                memberId: that.fromUser.id,
                                type: that.fileType,
                                data: res.data.httpUrl
                            }
                            that.send(param);
						}else{
							that.$toast.fail(res.msg);
							return;
						}
					}).catch(function (error) {
						return;
					});
                }
               
               
            },
            toSendGift(){
                let that = this;
                that.$router.push({
                    path:'/sendGift',
                    query:{
                        memberId: that.fromUser.id 
                    }
                })
            },
            moreInput() {
                console.log(111)
                this.popShow = !this.popShow
            },
            handleEmotion(txt) {
                this.sendMsg += txt;
            },
            //获取用户信息
            getUserInfo(id){
                let that = this;
                getQuery('/memaber/list/get/'+id)
                    .then (res => {
                    if(res.code == 200){
                        //console.log(res);
                        that.fromUser = res.data;
                        that.user = getUser();
                        that.loadData();
                        that.userLogoffFlag = that.fromUser.isOnLine
                    }else{
                        that.$toast.fail(res.msg);
                    }
                })
            },
            // 发送和接收消息
            // handdleMsg() {
            //     let that = this;
            //     console.log(that.ws);
                
            // },
            send(sendMsg) {
                let that = this;
                if(!sendMsg){
                    //that.$toast.fail('发送数据不能为空');
                    return;
                }
                let param = {
                    uid: String(Date.parse(new Date())),
                    msgType: "sendMsg",
                    content: sendMsg
                }
                
                console.log('发送消息：',param)
                that.ws.send(JSON.stringify(param))
                //清空输入框
                that.sendMsg = '';
            },
            getMessage(msg) {
                let that = this;
                // console.log('返回消息',msg)
                if(msg){
                    let res = JSON.parse(msg.data);
                   
                    //提示信息
                    if(websoketConstant.msgError == res.msgType){
                        that.$toast.fail(res.content);
                    }else if(websoketConstant.logonFailure == res.msgType){
                        that.$toast.fail(res.content);
                        that.$router.push({
                            path:'/login'
                        })
                    } 
                    let content = JSON.parse(res.content);
                     console.log('返回消息',content)
                    if(websoketConstant.userLogoff == res.msgType){
                        
                        if(content.id == that.fromUser.id && !that.usersOnlineFlag){
                            that.$toast(that.$i18n.t('m.msg.MSG41'))
                            that.usersOnlineFlag = !that.usersOnlineFlag;
                        }
                    }else if(websoketConstant.usersOnline == res.msgType){
                        if(content.id == that.fromUser.id && that.usersOnlineFlag){
                            that.$toast(that.$i18n.t('m.msg.MSG42'))
                            that.usersOnlineFlag = !that.usersOnlineFlag;
                        }
                    }
                    //console.log('服务器消息：',content,websoketConstant.sendMsgSuccess)
                    //对消息进行处理
                    let item = {}
                    if(websoketConstant.sendMsgSuccess == res.msgType
                    || websoketConstant.receiveMsg == res.msgType){
                        if(websoketConstant.sendMsgSuccess == res.msgType){
                        //发送成功的数据
                            item.isDriving = false
                            item.img = that.user.httpAvatar
                             //判断消息类型
                            if(content.type == 'text'){
                                item.message = getEmotionHtml(content.data);
                            }else if(content.type == 'image'){
                                item.message = `<img src='${content.data}' onclick='showDetail("${content.data}")' style='width: 100px;'>`
                            }else if(content.type == 'video'){
                                item.message = `<video controls="true" width="100%" height="100%" src="${content.data}"></video>`
                            }
                            item.time = formatDateTime(content.time)
                            that.chatList.push(item)
                        }else if(websoketConstant.receiveMsg == res.msgType){
                            // 接收到的消息
                           
                            if(content.fromMember.id == that.fromUser.id){
                                item.isDriving = true
                                item.img = that.fromUser.httpAvatar
                                 //判断消息类型
                                if(content.type == 'text'){
                                    item.message = getEmotionHtml(content.data);
                                }else if(content.type == 'image'){
                                    item.message = `<img src='${that.httpUrl}${content.data}' onclick='showDetail("${list[i].httpPath}")' style='width: 100px;'>`
                                }else if(content.type == 'video'){
                                    item.message = `<video controls="true" width="100%" height="100%" src="${that.httpUrl}${content.data}"></video>`
                                }
                                item.time = formatDateTime(content.time)
                                that.chatList.push(item)
                            }
                            
                        }
                       
                        
                   
                    }
                    //将轮轴调最底部
                    that.$nextTick(function(){
                        that.$refs.chatCtn.scrollTop = that.$refs.chatCtn.scrollHeight
                    })
                }
            }
        },
        components: {
            [Uploader.name]: Uploader,
            [Popup.name]: Popup,
            HeaderNav,
            Emotion
        },
        mounted(){
// window.location.reload()
        },
        created: function() {
            let that = this;
            // window.location.reload()
            that.ws = that.$parent.$data.ws;
            let id = that.$route.query.id;
            that.ws.onmessage = that.getMessage;
            window.showDetail = that.showDetail;
            that.getUserInfo(id);
            that.getTranslateList();
            // window.location.reload()
        }
    }
</script>
<style scoped>
    .img_container{
        width: 95%;
        padding-right: 5%;
        overflow-y: auto;
        height: 20vh;
    }
    .img_container::-webkit-scrollbar{
        display: none;/*去掉滚动条 */
    }
  
    .img_item{
        height: 10vh;
        width: 10vh;
        margin-left: 5vw;
        margin-top: 2vw;
    }
    .chatIndex { 
        padding-top: 8vh;
        /* padding-bottom: 20vh; */
    }

    .longList {
        height: 58vh;
        /* margin-bottom: 10vh; */
    }

    .shortList {
        height: 34vh;
        /* margin-bottom: 10vh; */
    }

    .chatItem {
        width: 100vw;
    }

    .chatTime {
        text-align: center;
        line-height: 10vw;
        color: #a3a6a6;
        font-size: 24px;
    }

    .chatLine {
        position: relative;
        width: 100vw;
        display: flex;
        flex-direction: row;
    }

    .chatLineRight {
        justify-content: flex-end;
    }

    .chatPortrait {
        width: 10vw;
        height: 10vw;
        border-radius: 10vw;
        margin: 0px 2.5vw;
    }

    .chatMessage {
        background-color: #01d2ff;
        max-width: 64vw;
        padding: 2vh 3vw;
        border-radius: 3vw;
        font-size: 25px;
        letter-spacing: 2px;
        margin-top: 10px;
        margin-bottom: 10px;
        /* height: 20vh; */
    }

    .chatMark {
        position: absolute;
        left: 11.5vw;
        top: 1.5vh;
        width: 0px;
        height: 0px;
        border-width: 2vw;
        border-style: solid;
        border-color: transparent #01d2ff transparent transparent;
    }

    .chatMarkRight {
        position: absolute;
        left: 84.5vw;
        transform: rotateY(180deg);
    }

    .chatBottom {
        position: fixed;
        bottom: 0vh;
    }

    .notice {
        background-color: #eeeeee;
        color: #5e95e0;
        width: 100vw;
        height: 5.5vh;
        line-height: 5.5vh;
        font-size: 26px;
        text-align: center;
    }

    .inputCtn {
        background-color: #778899;
        width: 96vw;
        height: 8vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px 2vw;
    }

    .inputMroe {
        background-color: #ffa500;
        width: 7vw;
        height: 7vw;
        border-radius: 7vw;
        font-size: 40px;
        text-align: center;
        line-height: 7vw;
        color: #fff;
    }

    .inputCtn input {
        width: 66vw;
        height: 4.5vh;
        margin-left: 1.5vw;
        border-radius: 1.5vw;
    }

    .sendButton {
        background-color: #ffa500;
        width: 15vw;
        height: 5vh;
        margin-left: auto;
        border-radius: 1.5vw;
        font-size: 28px;
        text-align: center;
        line-height: 5vh;
        color: #fff;
    }

    .inputPop {
        background-color: #fff;
        height: 25vh;
    }

    .popChoose {
        color: #a1a1a1;
        font-size: 4vh;
        height: 5vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .loadding_container{
        width: 100vw;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        color: #a1a1a1;
    }

    .emojilist_box{
        height: 24vh;
        width: 22vw;
        margin-left: 20px;
        margin-top: 20px;
        text-align: center;
    }

    .emojilist_img{
        height: 40%;
        width: 60%;
    }

    .emojilist_name{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* 文本不换行，这样超出一行的部分被截取，显示... */
    }

    .emojilist_info{
        font-size: 26px;
        color: #a1a1a1;
        display: -webkit-box;
        -webkit-line-clamp:2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
    }

    .translate_container{
        overflow-y: auto;
        margin: 10px auto;
        height: 80%;
        width: 100%;
        font-size: 15px;
    }

    .translate_item{
        display: flex;
        width: 80%;
        border-bottom: 1px #a1a1a1 solid;
        justify-content: center;
        align-items: center;
        height: 60px;
        margin-left: 10%;
    }

    .translate_title{
        font-size: 14px;
        height: 70px;
        margin-top: 10px;
        /* justify-content: left; */
        /* margin-left: 20px; */
    }

    .popup{
        width: 70vw;
        height: 30vh;
        text-align: center;
        font-size: 32px;
        color: #a1a1a1; 
        padding: 20px 0px;
    }

    .translate_tab{
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        font-size: 18px;
        line-height: 50px;
    }

    .translate_tab_item_sel{
        background-color: #01d2ff;
        width: 50%;
        color: white;
    }

    .translate_tab_item{
        background-color: white;
        width: 50%;
        color: black;
    }

    .popup_btn{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        background-color: #ff7300;
        color: white;
        font-size: 20px;
        height: 60px;
        width: 100px;
    }

    .translate_bottom{
        display: flex;
        width: 60%;
        justify-content: space-between;
        margin-left: 20%;
        margin-top: 20px;
    }

    .translate_pay{
        height: 80%;

    }

    .select_month{
    display: flex;
    position: relative;
    /* top: 20px; */
    justify-content: space-between;
    width: 110px;
    margin-left: 20%;
  }

  .select_add{
    width: 40px;
    height: 20px;
    font-size: 10px;
    border-radius: 3px;
    border: 2px #a1a1a1 solid;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>